<!-- 图像数据 -->
<template>
	<view class="page">
		<template >
			<view class="search-data">
				<view class="fix-wrap">
					<picker mode="selector" :range="tool_data" @change="">
						<view class="change-btn">
							<view class="select-data">(粤)湛江徐闻01-杀虫灯</view>
							<view class="iconfont f-s24">&#xe623;</view>
						</view>
					</picker>
					<view class="date-bar">
						<view class="date start-date" @click="changeDate(1)">
							<input type="text" v-model="start_date" placeholder="选择开始时间" disabled="true" class="inp">
						</view>
						<view class="date end-date" @click="changeDate(2)">
							<input type="text" v-model="end_date" placeholder="选择结束时间" disabled="true" class="inp">
						</view>
						<view class="btn">查看</view>
					</view>
				</view>
			</view>
			<view class="body">				
				<template v-if="!loadingState.default">
					<template v-if="!isEmpty">				
						<pic-list></pic-list>
						<loading :loadingState="loadingState"></loading>
					</template>
					<empty v-else><view slot="text">没有相关信息</view></empty>
				</template>
				<template v-else>
					<loading :loadingState="loadingState"></loading>
				</template>
			</view> 
		</template>
		
		<!-- 弹窗 -->
		<view v-if="flag.isFullPage" class="full-fix-page a-fadein">
			<laydate v-if="flag.isSeleceDate" :type="date_type" @selectDate="selectDate" @closeDate="closeDate" @clearDate="clearDate"></laydate>
		</view>
	</view>
</template>

<script>
	import picList from '@/components/pic-list.vue'
	import loading from '@/components/loading-more.vue'
	import laydate from '@/components/laydate.vue'
	export default {
		name: 'name',
		data() {
			return {
				isLogin: false,
				token: uni.getStorageSync('token'),
				loadingState:{
					default:false,
					loading:false,
					completed:true
				},
				date_type:'',
				start_date:'',
				end_date:'',
				flag:{		// 弹窗相关
					isFullPage:false,  
					isSeleceDate:false					 
				}, 
			}
		},
		async onLoad() {
			if (!this.token) {
				this.isLogin = await this.$loginState('reset');
				uni.showToast({
					icon: 'loading',
					title: '请先登录...',
					mask: true,
					duration: 1000
				})
			}
		},
		onShow() {

		},
		methods: {
			
			// 打开选择查询日期组件
			changeDate:function(type){
				//type ==1 开始日期 2 终止日期
				this.date_type=type;
				this.flag.isFullPage=true;
				this.flag.isSeleceDate=true;
				
			},
			
			// 选择日期
			selectDate:function(data){ 
				this.flag.isFullPage=false;
				this.flag.isSeleceDate=false;
				if(data.type==1){
					this.start_date=data.date;
				}else{
					this.end_date=data.date;
				}
			},
			
			// 关闭日期控件
			closeDate:function(){
				this.flag.isFullPage=false;
				this.flag.isSeleceDate=false;
			},
			
			// 清空日期
			clearDate:function(data){ 
				this.flag.isFullPage=false;
				this.flag.isSeleceDate=false;
				this.start_date='';
				this.end_date=''; 
			}
		},
		components: {
			picList,
			loading,
			laydate
		},
		computed: {
			loginStateUpdate() {
				return this.$store.state.loginStateUpdate
			}
		},
		watch: {
			loginStateUpdate(newer, older) {
				if (newer) {
					console.log('登录状态更新')
					this.token = uni.getStorageSync('token');
					this.userInfo = uni.getStorageSync('userInfo');
				}
			}
		}

	}
</script>

<style>
</style>
